<template>
  <div class="container">
    <div class="search">
      <el-select v-model="params.userId" placeholder="请选择用户" clearable @change="findBySearch">
        <el-option v-for="item in userData" :key="item.id" :label="item.username" :value="item.id"></el-option>
      </el-select>
      <el-select v-model="params.status" placeholder="请选择收藏状态" clearable @change="findBySearch">
        <el-option label="启用" value="0"></el-option>
        <el-option label="禁用" value="1"></el-option>
      </el-select>
      <el-select v-model="params.radio" placeholder="请选择收藏对象" clearable @change="selectObjs">
        <el-option label="歌曲" value="歌曲"></el-option>
        <el-option label="歌单" value="歌单"></el-option>
      </el-select>
      <el-select v-model="params.radioId" :placeholder="params.radio ? params.radio : '请选择'" clearable @change="findBySearch">
        <el-option v-for="item in objs" :key="item.id" :label="item.option" :value="item.id"></el-option>
      </el-select>
      <el-button type="warning" @click="clearParams">清空</el-button>
    </div>

    <div class="table">
      <el-table :data="collectData" height="75vh" stripe highlight-current-row>
        <el-table-column label="序号" prop="id" sortable width="80px"></el-table-column>
        <el-table-column label="收藏人" prop="username">
          <template #default="{ row }">
            {{ row.username ? row.username : '天王老子' }}
          </template>
        </el-table-column>
        <el-table-column label="收藏对象" prop="object"></el-table-column>
        <el-table-column label="收藏时间" prop="createTime"></el-table-column>
        <el-table-column label="收藏状态" prop="status">
          <template #default="{ row }">
            <el-switch v-model="row.status" active-value="0" inactive-value="1" @change="updataStatus(row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-popconfirm
              title="您确定删除嘛？"
              confirm-button-text="确定"
              cancel-button-text="取消"
              @confirm="deleteCollect(row)"
            >
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination">
      <el-pagination
        v-model:current-page="params.pageNum"
        v-model:page-size="params.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        size="default"
        layout="total, sizes, prev, pager, next, jumper"
        :total="params.total"
        @size-change="findBySearch"
        @current-change="findBySearch"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  collectDeleteApi,
  collectFindBySearchApi,
  collectFindSongApi,
  collectFindSongListApi,
  collectFindUserApi,
  collectSaveApi,
} from '@/api/collect'
import { ElMessage } from 'element-plus'
import { onMounted, ref, watch } from 'vue'

const params = ref({
  userId: '',
  status: '',
  radio: '',
  radioId: '',
  pageNum: 1,
  pageSize: 10,
  total: '',
})

const collectData: any = ref([])
const userData: any = ref([])
const objs: any = ref([])

onMounted(() => {
  findBySearch()
  findAllUser()
})

watch(
  () => params.value.radio,
  (newValue, oldValue) => {
    if (newValue === '' || newValue === undefined) {
      objs.value = []
    }
  }
)

const findBySearch = async () => {
  let res = await collectFindBySearchApi(params.value)
  collectData.value = res.data.list.map((item: any) => ({
    ...item,
    object: item.songName ? item.songName : item.songListTitle ? item.songListTitle : '无数据',
  }))
  params.value.total = res.data.total
}
const findAllUser = async () => {
  let res = await collectFindUserApi()
  userData.value = res.data
}
const selectObjs = async () => {
  findBySearch()
  let res: any
  let id = params.value.userId ? params.value.userId : -1
  if (params.value.radio === '歌曲') {
    res = await collectFindSongApi(id)
    res.data = res.data.map((item: any) => ({
      ...item,
      option: item.songName,
    }))
  } else if (params.value.radio === '歌单') {
    res = await collectFindSongListApi(id)
    res.data = res.data.map((item: any) => ({
      ...item,
      option: item.songListTitle,
    }))
  }
  objs.value = res.data
}
const clearParams = () => {
  params.value.pageNum = 1
  params.value.userId = ''
  params.value.status = ''
  params.value.radio = ''
  findBySearch()
}
const updataStatus = async (row: any) => {
  // console.log('修改状态：',row)
  await collectSaveApi(row)
  ElMessage.success('修改状态成功！')
}
const deleteCollect = async (row: any) => {
  await collectDeleteApi(row.id)
  ElMessage.success('删除成功')
  findBySearch()
}
</script>

<style scoped lang="scss">
.container {
  .search {
    display: flex;
    flex-wrap: nowrap;

    .el-input {
      width: 200px;
      margin-right: 10px;
    }

    .el-select {
      width: 150px;
      margin-right: 10px;
    }
  }

  .table {
    margin: 15px 0;

    .el-switch {
      --el-switch-on-color: #13ce66;
      --el-switch-off-color: #ff4949;
    }

    // 限制歌词的显示格式
    .multiline-ellipsis {
      display: -webkit-box;
      /* 多行折叠支持 */
      -webkit-line-clamp: 1;
      /* 限制显示的行数 */
      -webkit-box-orient: vertical;
      /* 垂直排列子元素（多行） */
      overflow: hidden;
      /* 超出隐藏 */
      text-overflow: ellipsis;
      /* 超出用省略号 */
      line-height: 20px;
      /* 每行高度（可调） */
      max-height: 60px;
      /* 3行 * line-height */
    }
  }

  .pagination {
    display: flex;
    justify-content: center;
  }

  .dialog {
    .el-input,
    .el-select {
      width: 80%;
    }
  }
}

/* CSS */
.cell {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

// 深度选择器
.none-up ::v-deep(.el-upload--picture-card) {
  display: none;
}
</style>
